<template>
  <div class="from_Modify">
    <div class="promptBox" v-if="Prompt">
      {{Prompt}}
    </div>
    <h3>找回密码</h3>
    <div class="inp">
      <input type="text" class="userP" placeholder="请输入手机号" v-model="fromModify.phone">
      <input type="text" class="provingCode" placeholder="请输入验证码" v-model="fromModify.provingCode">
      <p class="send">
        <span v-if="fromModify.timeText === '获取验证码'" class="c1" @click="verificationCode()">
          {{fromModify.timeText}}
        </span>
        <span class="c2" v-else>
          {{fromModify.timeText}}
        </span>
      </p>
      <input type="password" class="userPass" placeholder="请输入6-16位新密码" v-model="fromModify.pass">
      <div class="err">
        <p>{{fromModify.err}}</p>
      </div>
      <div class="registerBtn" @click="login">
        确 &nbsp; 定
      </div>
      <div class="register">
        <img src="../../../static/img/login/log_go_to_reg.png" alt="">
        <router-link :to="{path:'login'}" tag="span">
          <a href="#">前往登录</a>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      fromModify: {
        err: '',
        phone: '',
        pass: '',
        provingCode: '',
        timeText: '获取验证码'
      },
      Prompt: ''
    }
  },
  watch: {
    Prompt (val, oldVal) {
      if (val !== '') {
        let _this = this
        setTimeout(function () {
          _this.Prompt = ''
        }, 3000)
      }
    }
  },
  methods: {
    login: function () {
      let Verification = /^1(3|4|5|7|8)\d{9}$/
      if (!this.fromModify.phone) {
        this.fromModify.err = '请输入手机号'
        $('.userP').css('borderColor', '#ff6f3c')
      } else if (Verification.test(this.fromModify.phone) === false) {
        this.fromModify.err = '请输入有效的手机号码'
        $('.userP').css('borderColor', '#ff6f3c')
      } else {
        $('.userP').css('borderColor', '')
        if (this.fromModify.provingCode === '') {
          this.fromModify.err = '请输入验证码'
          $('.provingCode').css('borderColor', '#ff6f3c')
        } else {
          $('.userPass').css('borderColor', '')
          let reg = /^[A-Za-z0-9]{6,16}$/
          if (reg.test(this.fromModify.pass) === false) {
            this.fromModify.err = '请输入6-16位字母或数字'
            $('.userPass').css('borderColor', '#ff6f3c')
          } else {
            this.fromModify.err = ''
            $('.provingCode').css('borderColor', '')
            // 加密
            let password = this.$md5(this.fromModify.pass)
            // 请求
            this.$http({
              url: 'http://paimai.ucarcloud.cn/auctionCarCore/login/reSetPassword',
              params: {telphone: this.fromModify.phone, password: password, verifyCode: this.fromModify.provingCode}
            }).then(r => {
              switch (r.data.message) {
                case '用户尚未注册':
                  this.Prompt = '用户尚未注册!'
                  break
                case '重置密码失败,验证码错误':
                  this.Prompt = '验证码错误!'
                  break
                case '重置密码成功':
                  this.Prompt = '重置密码成功!'
                  setTimeout(() => {
                    this.$router.push({path: '/login/login'})
                  }, 3500)
                  break
                default:
                  break
              }
            })
          }
        }
      }
    },
    // 获取验证码
    verificationCode: function () {
      let Verification = /^1(3|4|5|7|8)\d{9}$/
      if (!this.fromModify.phone) {
        this.fromModify.err = '请输入手机号'
      } else if (Verification.test(this.fromModify.phone) === false) {
        this.fromModify.err = '请输入有效的手机号码'
      } else {
        // 发送请求
        let _this = this
        this.$http({
          url: 'http://paimai.ucarcloud.cn/auctionCarCore/smsTemplate/sendVerifyCode',
          params: {telephone: this.fromModify.phone, type: '1'}
        }).then(r => {
          _this.verifyCode = r.data.code
          if (r.data.state !== 'SUCCESS') {
            _this.Prompt = '用户尚未注册!'
          } else {
            var timTex = this
            var i = 61
            var timFun = function () {
              i--
              if (i < 10) {
                i = '0' + i
              }
              timTex.fromModify.timeText = i + '秒后可重发'
              if (i <= 1 || window.location.hash !== '#/login/modify') {
                timTex.fromModify.timeText = '获取验证码'
                clearInterval(setIn)
                timFun = null
              }
            }
            timFun()
            var setIn = setInterval(timFun, 1000)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.from_Modify{
  float: right;
  width: 420px;
  height: 455px;
  background: #fff;
  margin-top: 76px;
  position: relative;
  .promptBox{
    width: 220px;
    height: 50px;
    line-height: 50px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 240px;
    z-index: 1005
  }
  h3{
    padding-left: 20px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #e3e3e3;
  }
  .inp{
    width: 307px;
    margin: 4px auto 0;
    position: relative;
    overflow: hidden;
    input{
      width: 288px;
      height: 44px;
      border: 1px solid #e3e3e3;
      color: #333;
      font-size: 14px;
      border-radius: 5px;
      padding-left: 16px;
      margin-top: 24px;
      &:hover{
        border-color: #ff6f3c;
      }
      &:focus{
        border-color: #ff6f3c;
      }
    }
    .send{
      border-left: 1px solid #e3e3e3;
      background: #fff;
      position: absolute;
      height: 20px;
      // line-height: 20px;
      right: 5px;
      top: 108px;
      width: 120px;
      text-align: center;
      color: #ff6f3c;
      font-size: 14px;
      z-index: 999;
      .c1{
        cursor: pointer;
        display: inline-block;
        width: 120px;
        height: 46px;
        line-height: 46px;
        margin-top: -13px;
      }
      .c2{
        cursor: not-allowed;
        display: inline-block;
        width: 120px;
        height: 46px;
        line-height: 46px;
        margin-top: -13px;
        color: #999;
      }
    }
    .Interlayer{
      overflow: hidden;
      margin-top: 20px;
      color: #666;
      font-size: 13.5px;
      .automaticLogon{
        cursor: pointer;
        float: left;
      }
      .modifyPassword{
        float: right;
        cursor: pointer;
        a{
          color: #ff6f3c;
        }
        p{
          margin-bottom: 8px;
        }
      }
    }
    .err{
      height: 50px;
      font-size: 14px;
      color: #f51111;
      p{
        padding: 24px 0 0 3px;
      }
    }
    .registerBtn{
      cursor: pointer;
      width: 305px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      border-radius: 5px;
      background: #ff6f3c;
    }
    .register{
      cursor: pointer;
      a{
        font-size: 16px;
        color: #ff6f3c;
      }
      float: right;
      margin: 54px 0 0 0;
      img{
        vertical-align: -3px;
      }
    }
  }
}
</style>
